<template>
  <div style="width: 100%;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="订单列表" name="first">
        <div style="float:right;bottom:5px;">
          <el-button @click="refreshPageRequest(1)" type="primary">查 询</el-button>
        </div>
        <el-table
          :data="list"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
          size="small"
          align="center"
          header-align="center"
          style="width: 100%"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          highlight-current-row
          stripe
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <!--v-if="scope.row.orderStatus =='1'"-->
          <el-table-column prop="orderCode" label="订单编号" width="230">
            <!--<template slot-scope="scope">-->
            <!--<span>{{ scope.row.orderNo}}</span>-->
            <!--</template>-->
            <template slot-scope="scope">
              <router-link :to="{path:'/OrderDetail/'+scope.row.orderNo}">
                <el-link type="primary">{{scope.row.orderNo}}</el-link>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column label="交货单号" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.deliverNo}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品编码" width="100">
            <template slot-scope="scope">
              <span>{{scope.row.goodsId}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态">
            <template slot-scope="scope">
              <span v-if="scope.row.orderStatus =='3'">待发货</span>
              <span v-if="scope.row.orderStatus =='4'">已发货</span>
            </template>
          </el-table-column>

          <el-table-column prop="orderCreateTime" label="订单创建时间" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.buyTime}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shippingStatus" label="发货状态">
            <template slot-scope="scope">
              <span v-if="scope.row.orderStatus =='3'">待发货</span>
              <span v-if="scope.row.orderStatus =='4'">已发货</span>
            </template>
          </el-table-column>
          <!--      <el-table-column prop="picker" label="拣货员" >
      </el-table-column>
      <el-table-column prop="supplier" label="供应商" >

&lt;!&ndash;        <template slot-scope="scope">&ndash;&gt;
&lt;!&ndash;          <span>{{ scope.row.supplierId}}</span>&ndash;&gt;
&lt;!&ndash;        </template>&ndash;&gt;
          </el-table-column>-->
          <el-table-column prop="sellerName" label="销售店铺名称" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.storeName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="seller" label="销售商家名称" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.merchantName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="seller" label="销售渠道">
            <template slot-scope="scope">
              <span>{{ scope.row.saleChannel}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="seller" label="收货人详情" width="200">
            <!--<template slot-scope="scope">-->
            <!--<span>姓名：{{ scope.row.receiverName}} 手机：{{ scope.row.receiverPhone}} 收货地址：{{ scope.row.receiverProvinceName}}{{ scope.row.receiverCityName}}{{ scope.row.receiverRegionName}}{{ scope.row.receiverAddress}}</span>-->
            <!--</template>-->
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.receiverName }}</p>
                <p>手机: {{ scope.row.receiverPhone }}</p>
                <p>收货地址:{{ scope.row.receiverProvinceName}}{{ scope.row.receiverCityName}}{{ scope.row.receiverRegionName}}{{ scope.row.receiverAddress}}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.receiverName }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作"  fixed="right">
        <template slot-scope="scope"  >
          <el-button size="mini" @click="delivery(scope.row)" v-if="scope.row.orderStatus =='3'">发货</el-button>
        </template>
          </el-table-column>-->
        </el-table>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button @click="nextStep" type="primary">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="配送设置" name="second">
        <el-form>
          <el-row>
            <el-col style="margin:0px 0px 30px 115px">
              <el-form-item label="配送商：">
                <el-select
                  @change="changeDistributor"
                  v-model="form.distributorId"
                  placeholder="请选择配送商"
                >
                  <el-option
                    v-for="item in deliveryTypeOptions"
                    :key="item.id"
                    :label="item.logisticsCompanyName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="text-align:left;margin-bottom:30px">
            <el-col style="margin-left:115px">
              <el-form-item label="物流单号：">
                <el-input v-model="form.expressNo" style="width:215px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button @click="merge" type="primary">合 并</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },

  // 子组件要显式的用 props 选项声明它预期的数
  props: {
    type: {
      type: String,
      default: null,
    },
    parentFilters: {
      type: Object,
    },
  },

  data() {
    return {
      form: {
        orders: [],
        distributorId: "",
        distributorName: "",
        expressNo: "",
      },
      deliveryTypeOptions: [], //配送方式集合
      activeName: "first",
      totalSize: 0,
      // 分页信息
      filters: {
        start: "1",
        limit: 10,
        orderStatus: 0,
      },

      list: [],
      apiList: [],

      listQuery: {
        page: 1,
        limit: 5,
        type: this.type,
        sort: "+id",
      },
      loading: false,
      multipleSelection: [],
    };
  },
  created() {
    if (this.$route.query.tab != "undefined" && this.$route.query.tab != "") {
      this.filters.orderStatus = this.$route.query.tab;
    }
  },
  mounted() {
    this.refreshPageRequest(1);
  },
  methods: {
    changeDistributor(value) {
      this.deliveryTypeOptions.forEach((item, index, array) => {
        if (item.id == value) {
          this.form.distributorName = item.logisticsCompanyName;
        }
      });
    },
    handleClick(tab, event) {
      if (!this.multipleSelection.length > 1 && tab.name == "second") {
        this.$message({
          message: "请至少选择两条数据！",
          type: "warning",
        });
      } else {
        this.activeName = tab.name;
      }
    },
    closeDialog() {
      this.multipleSelection = [];
      console.log(this.multipleSelection);
      this.$emit("closeDialog");
    },
    merge() {
      //判断合并订单信息
      let order = this.multipleSelection[0];
      let flag = true;
      for (var i = 0; i <= this.multipleSelection.length - 1; i++) {
        if (this.multipleSelection[i].receiverName != order.receiverName) {
          flag = false;
        }
      }
      if (!flag) {
        this.$message({
          message: "所选订单中收货人信息不一致！",
          type: "warning",
        });
        return;
      }

      let distributorId = this.form.distributorId;
      let this_ = this;
      this.form.orders = this.multipleSelection;
      let param = { mergeOrderParams: JSON.stringify(this.form) };
      this_.utils.request.mergeOrder(param, function (res) {
        if (res.code == "0000") {
          this_.$message({
            message: "合并成功！",
            type: "success",
          });
        } else {
          this_.$message({
            message: res.msg,
            type: "error",
          });
        }
        this_.multipleSelection = [];
        console.log(this_.multipleSelection);
        this_.activeName = "first";
        this_.$emit("closeDialog");
      });
    },

    nextStep() {
      if (this.multipleSelection.length < 2 && this.activeName == "first") {
        this.$message({
          message: "请至少选择两条数据！",
          type: "warning",
        });
        return;
      } else {
        let order = this.multipleSelection[0];
        let flag = true;
        for (var i = 0; i <= this.multipleSelection.length - 1; i++) {
          if (this.multipleSelection[i].receiverName != order.receiverName) {
            flag = false;
          }
        }
        if (!flag) {
          this.$message({
            message: "所选订单中收货人信息不一致！",
            type: "warning",
          });
          return;
        }
        this.queryOrderLogisticsCompanyList();
        this.activeName = "second";
      }
    },
    queryOrderLogisticsCompanyList: function () {
      let this_ = this;
      this_.utils.request.queryOrderLogisticsCompanyList({}, function (res) {
        if (res.code == "0000") {
          this_.deliveryTypeOptions = res.data;
        }
      });
    },

    /**
     * 查看
     * */
    check(row) {
      this.$emit("check", { row: row });
    },
    /**
     * 发货
     * */
    delivery(row) {
      this.$emit("check", { row: row });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 换页刷新
    handleSizeChange: function (pageSize) {
      this.filters.pageNo = 1;
      this.filters.pageSize = pageSize;
      this.setList();
    },

    /**
     * 设置列表
     */
    setList: function () {
      this.loading = true;
      let _filters = JSON.parse(JSON.stringify(this.parentFilters));

      _filters["start"] = this.filters.pageNo;
      _filters["limit"] = this.filters.limit;

      let this_ = this;
      if (this.filters.orderStatus === 0) {
        this.filters.orderStatus = null;
      }
      _filters["orderStatus"] = this.filters.orderStatus;
      this.utils.request.deliverManagerQueryList(_filters, function (res) {
        if (res.code === "0000") {
          this_.list = res.data;
          this_.totalSize = Number(res.data.total);
        }
      });
      this.loading = false;
    },
    // 换页刷新
    refreshPageRequest: function (pageNum) {
      this.multipleSelection = [];
      this.filters.pageNo = pageNum;
      this.setList();
    },

    //查看
    seeNewTab: function (id) {
      this.$router.push("/GroupDetailPromotion?id=" + `${id}`);
    },
    //复制
    copyBtnShow: function (id) {
      let that = this;
      this.filters.id = id;
      this.utils.request.grouponCopy(this.filters, function (res) {
        if (res.code == "0000") {
          that.filters.id = null;
          that.setList();
        }
      });
    },
    //关闭
    closeActivity: function (id) {
      this.$confirm("是否确认关闭活动？", "提示", {
        type: "warning",
      })
        .then(() => {
          let callback = (res) => {
            if (res.code == "0000") {
              this.setList();
              this.$message({ message: "活动已关闭 ", type: "success" });
            } else {
              this.$message({
                message: "操作失败, " + res.message,
                type: "error",
              });
            }
            this.loading = false;
          };

          var param = {};
          param.id = id;
          this.utils.request.patchGrouponClose(param, callback);
        })
        .catch(() => {});
    },
    deleteActivity: function (row) {
      var this_ = this;

      this.$confirm("是否确认删除活动？", "提示", {
        type: "warning",
      })
        .then(() => {
          let callback = (res) => {
            if (res.code == "0000") {
              this.$message({ message: "删除成功", type: "success" });
              this.setList();
            } else {
              this.$message({
                message: "操作失败, " + res.message,
                type: "error",
              });
            }
            this.loading = false;
          };

          var param = {};
          param.id = row.id;
          this.utils.request.patchGrouponDelete(param, callback);
        })
        .catch(() => {});
    },
    updateBtnShow: function (id) {
      //编辑拼团活动
      this.$router.push("/GroupActivityComponents?auth=1&id=" + id);
    },
    //追加商品
    appendsuperadminProduct: function () {},
    //查看营销报告
    viewMarketingReport: function () {
      this.$router.push("/MarketingReport");
    },
  },
};
</script>

